<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('闸门编辑')">
	<link rel="stylesheet" th:href="@{/adminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css}">
	<meta charset="UTF-8">
</head>
<body>
<div id="editMainDiv">
	<div class="container" style="padding: 0px;">
		<div class="row" style="padding: 20px 0;">
			<h5 style="margin-left: 3px;">{{title}}</h5>
		</div>
		<div class="row form-group">
			<label class="control-label col-lg-1 col-md-1 col-sm-1">系统编码</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<input class="form-control" type="text" readonly="readonly" value="T101">
			</div>
			<label class="control-label col-lg-1 col-md-1 col-sm-1">桩号</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<input class="form-control" type="text" v-model="modelData.mileage">
			</div>
			<label class="control-label col-lg-1 col-md-1 col-sm-1">名称</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<input class="form-control" type="text" v-model="modelData.name">
			</div>
		</div>
		<div class="row form-group">
			<label class="control-label col-lg-1 col-md-1 col-sm-1">所属渠道</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<input class="form-control col-lg-1 col-md-1 col-sm-1" type="text" v-model="modelData.canalSystemName" readonly="readonly">
				<span class="input-group-addon"><span class="glyphicon glyphicon-folder-open" @click="selectParent"></span></span> 
			</div>
			<label class="control-label col-lg-1 col-md-1 col-sm-1">所属闸门厂商</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<select class="form-control" v-model="modelData.waterGateVendorGuid">
					<option value="-1">请选择</option>
					<option v-for="data in waterGateVendorList" :value="data.id">{{data.name}}</option>
				</select>
			</div>
		</div>
		<div class="row form-group">
			<label class="control-label col-lg-1 col-md-1 col-sm-1">备注</label>
			<div class="col-lg-11 col-md-11 col-sm-11">
				<textarea class="form-control" rows="5"></textarea>
			</div>
		</div>
		<div style="text-align: center;">
			<button type="button" @click="save" class="btn btn-success col-lg-2 col-md-2 col-lg-offset-3 col-md-offset-3">保存</button>
			<button type="button" @click="cancel" class="btn btn-warning col-lg-2 col-md-2 col-lg-offset-1 col-md-offset-1">取消</button>
		</div>
	</div>
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript" th:inline="javascript">
const id = [[${id}]];
const BASE_PATH = [[@{/}]];
const URLS = {
	PAGE_URLS: {
		SELECT_PARENT: BASE_PATH+'/router/waterdistribute/waterGate/selectCanalSystem'
	},
	API_URLS: {
		SAVE: BASE_PATH+'/v1/restful/waterGate/save',
		UPDATE: BASE_PATH+'/v1/restful/waterGate/update',
		GET: BASE_PATH+'/v1/restful/waterGate/get/'+id,
		GET_VENDOR: BASE_PATH+'v1/restful/waterGateVendor/list'
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	/*
	* 如果多个请求，可能导致不能及时关闭
	*/
	layer.closeAll();
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var app = new Vue({
	el: '#editMainDiv',
	data: {
		title: '添加闸门',
		modelData: {
			id: '',
			name: '',
			mileage: '',
			waterGateVendorGuid: '-1',
			canalSystemGuid: '',
			canalSystemName: ''
		},
		waterGateVendorList: []
	},
	methods: {
		init: function() {
			/*
			* 获取闸门厂商列表
			*/
			axios.post(URLS.API_URLS.GET_VENDOR, {})
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data.content;
					console.log(data)
					app.waterGateVendorList = data;
				}
			}).catch(function (error) {
			});
			/*
			* 获取编辑的数据
			*/
			if (id == null || id == 'null') {
				
			} else {
				this.title = '编辑闸门';
				axios.get(URLS.API_URLS.GET)
				.then(function (res) {
					data = res.data;
					if (data.code == 200) {
						data = data.data;
						app.modelData = data;
					}
				}).catch(function (error) {
				});
			};
		},
		save: function() {
			let saveDataJson = app.modelData;
			let url = (id == null) ? URLS.API_URLS.SAVE : URLS.API_URLS.UPDATE;
			axios.post(url, saveDataJson)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					layer.alert('保存成功', function(i) {
						layer.close(i);
						let index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					})
				} else {
					layer.alert(data.message);
				}
			}).catch(function (error) {
			});
		},
		cancel: function() {
			let index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		},
		selectParent: function() {
			layer.open({
				type: 2,
				title: '选择所属渠道',
				shadeClose: false,
				area: ['35%', '450px'],
				shade: 0.2,
				maxmin: true,
				content: URLS.PAGE_URLS.SELECT_PARENT,
				end: function() {
					
				}
			});
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
</html>